<template>
	<view>
		<view class="top">
			<span @click="goback"><</span>
			<span>编辑详情</span>
		</view>
		<view class="bot">
			<view class="bot1" @click="dl">
				<span>头像</span>
				<view class="yuan"></view>	
			</view>
			<view class="bot1">
				<span>昵称</span>
				<view class="text"><input type="text" placeholder="未填写"></view>
			</view>
			<view class="bot1">
				<span>性别</span>
				<view>
					<text @click="dakai">{{nannv}}</text>
					<u-popup :show="show" mode="bottom" :customStyle="{height:'500rpx'}" @close="close">
						<view class="tanchu">
							<view class="wei a" @click="fu('未知')">未知</view>
							<view class="wei" @click="fu('男')">男</view>
							<view class="wei b" @click="fu('女')">女</view>
							<view class="dibtn" @click="show=false">取消</view>
						</view>
					</u-popup>
				</view>	
			</view>
			<view class="bot1">
				<span>手机号</span>
				<view class="icon"></view>	
			</view>
		</view>
		<view >
			<u-button type="success" class="btn" >提交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nannv: "未知",
				// 弹出层显示隐藏
				show: false,
			};
		},
		onLoad() {
			
		},
		methods:{
			// 赋值男女
			fu(nei) {
				console.log(nei);
				this.nannv = nei
				this.show = false
			},
			// 控制弹出层显示隐藏
			dakai() {
				this.show = true
			},
			//返回上一级
			goback(){
				uni.switchTab({
					url:"/pages/my/my"
				})
			},	
		}
	}
</script>

<style lang="scss">
.top{
	width: 100%;
	height: 100rpx;
	display: flex;
	align-items: center;
	font-weight: bold;
	:nth-child(1){
		margin-left: 30rpx;
		font-size: 50rpx;
	}
	:nth-child(2){
		margin-left: 260rpx;
	}
}
	.bot{
		width: 100%;
		height: 400rpx;
		.bot1{
			height: 100rpx;
			margin-left: 30rpx;
			margin-right: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			span{
				display: flex;
				justify-content: space-between;
				align-items: center;
				
			}
			.yuan{
				width: 100rpx;
				height: 100rpx;
				background-color: #ccc;
				border-radius: 50%;
			}
			.text{
				text-align: right;
			}
		}
	}
	
	.btn{
		width: 95%;
		margin-top: 20rpx;
	}
</style>
